<template>
  <div class="image-container">
    <img
      alt="Left Button"
      src="http://118.114.242.126:8000/media/imgs/an.png"
      class="left-button"
      @click="handleLeftButtonClick"
    />
    <img
      alt="Vue logo"
      src="http://118.114.242.126:8000/media/imgs/bgweb.jpg"
      class="custom-img"
    />
    <img
      alt="Right Button"
      src="http://118.114.242.126:8000/media/imgs/ios.png"
      class="right-button"
      @click="handleRightButtonClick"
    />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleLeftButtonClick() {
      console.log('Left button clicked');
      const downloadUrl = 'http://118.114.242.126:8000/media/app-release.apk';
      window.open(downloadUrl);
    },
    handleRightButtonClick() {
      console.log('Right button clicked');
    }
  }
};
</script>

<style>
/* 通用样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 图片容器样式 */
.image-container {
  position: relative;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* 背景图片样式，让图片根据容器自适应 */
.custom-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 左右按钮样式，使用百分比定位和相对单位 */
.left-button,
.right-button {
  position: absolute;
   width: 200px;
    height: 80px;
  cursor: pointer;
}

.left-button {
  left: 3%;
  top: 11%;
  transform: translateY(-30%);
}

.right-button {
  right: 3%;
  top: 11%;
  transform: translateY(-30%);
}

/* 媒体查询，针对小屏幕设备进一步优化布局 */
@media (max-width: 768px) {
 .left-button,
 .right-button {
   width: 200px;
    height: 80px;
  }
 .left-button {
    left: 3%;
  }
 .right-button {
    right: 3%;
    
  }
}
</style>